@import '@/assets/mixin.scss';

@font-face {
  font-family: 'OptimizeTitleBlack';
  src: url('./assets/OptimizeTitleBlack.ttf');
}

//  --- --- --- --- ---
//  --- css变量定义 ---
//  --- --- --- --- ---

:root {
  --space: 0.5rem; // 默认间距
  --header: 5rem; // 头部高度
}

//  --- --- --- --- ---
//  --- html全局标签 ---
//  --- --- --- --- ---
* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

body {
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

body,
#ice-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

#ice-container {
  z-index: 0; // 创建一个局部堆叠上下文，避免内部元素的z-index影响附加在body上元素的显示优先级
}

// 滚动条样式
::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

.ant-tree-list-scrollbar-thumb,
.rc-virtual-list-scrollbar-thumb {
  width: 5px !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
}

//  --- --- --- --- --- ---
//  --- 自定义类名全局样式 ---
//  --- --- --- --- --- ---

.draggable-card {
  @apply absolute min-w-20em w-max;

  right: calc(var(--space) * 2 + 2.5rem);
  top: calc(var(--space) + var(--header));

  .ant-card-head-title {
    @apply cursor-move;
  }

  .ant-card-head {
    min-height: inherit !important;
    padding: 0.35em 0.5em !important;
    padding-left: 1em !important;
    background: linear-gradient(to left, #000e19 6%, #006257 99%) !important;
  }
  .ant-card-body {
    padding: 0 !important;
  }
}

// 奇数部分，进行一定程度的偏移 todo（临时处理方案）
.draggable-card-mask:nth-of-type(even) .draggable-card {
  right: calc(var(--space) * 2 + 2.5rem + 2.5rem);
  top: calc(var(--space) + var(--header) + 2.5rem);
}

.flex-col > .flex-1 {
  height: 0;
}

.flex-row > .flex-1 {
  width: 0;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-align-last {
  text-align: justify;
  text-align-last: justify;
}

.flex-card {
  @apply flex flex-col;

  .ant-card-body {
    @apply flex-1 h-0 overflow-y-auto;
  }
}

.flex-table {
  @apply h-full;

  & > .ant-spin-nested-loading {
    @apply h-full;

    & > .ant-spin-container {
      @apply h-full flex flex-col;

      & > .ant-table {
        @apply flex-1 h-0 overflow-y-auto;
      }
    }
  }
}

.flex-tabs {
  @apply h-full;

  .ant-tabs-content-holder {
    @apply flex-1 h-0 overflow-y-auto px-1em;
  }
}

.flex-list {
  @apply flex flex-col;

  & > *:nth-child(1) {
    @apply flex-1 h-0 overflow-y-auto;
  }

  & > .ant-list-pagination {
    margin: 1rem 0;
  }
}

//  --- --- --- --- --- ---
//  --- 自定义类名全局样式 ext 有图片限制---
//  --- --- --- --- --- ---

////////////////--- 地图弹框样式 ---//////////////////
.l3d-popup:hover {
  z-index: 9999 !important; // hover的时候在最前面展示，避免遮挡
}

/* table */
.ant-table {
  /* border-collapse: collapse; */
  border-spacing: 0;
  border: 1px solid #ddd; /* 设置外边框 */

  .ant-table-pagination {
    margin-top: 10px;
  }

  .ant-table-thead > tr > th {
    color: #55647b;
    font-size: 14px;
    font-weight: 500;
    background: #f0f2f5;
    border-radius: 0 !important;
  }

  .ant-table-body {
    color: #262626;
    background-color: transparent !important;
  }
}
// 分页
.ant-table-pagination {
  margin-top: 10px;
  .ant-pagination-item {
    background: transparent;
  }
}
.ant-pagination {
  .ant-pagination-item {
    background: transparent;
  }
  .ant-select-selector {
    border: none !important;
    background: transparent !important;
  }
  .ant-pagination-options-quick-jumper input {
    border: none !important;
    background: transparent !important;
  }
  .ant-pagination-item-active {
    border-radius: 4px;
    border: none;
    opacity: 1;
    background: #e8f3ff;
  }
}

/* ant-drawer */
.ant-drawer-body {
  background: #f6f8fb;
}
.ant-drawer-footer {
  background: #f6f8fb;
}

////////////////--- 文字小标题 ---//////////////////
.left-line-title {
  display: inline-block;
  font-size: 16px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #535d6c;
  position: relative;
  padding-left: 12px;
}

.left-line-title::before {
  content: '';
  width: 4px;
  background-color: #67afff;
  display: inline-block;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 0;
  border-radius: 2px;
}

////////////////--- 后台页面公共样式 ---//////////////////

// 主要区域
.lc-main-area {
  width: 100%;
  height: 100%;

  .lc-main-area-content {
    width: 100%;
    height: 100%;
    // background: #fcfcfc;
    // box-shadow: 0px 9px 17px 0px #d4d9e6;
    // border-radius: 6px;
    // opacity: 0.9;
    // border: 1px solid #e2e8ef;
    padding: 0px 12px;
    overflow: auto;
    position: relative;

    &::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #c7ced8;
    }
  }
}
